<template>
  <view class="bd">
    <uni-calendar
      :insert="true"
      :lunar="false"
      :start-date="startTime"
      :end-date="endTime"
      @change="change"
      :selected="datainfoday"
      @monthSwitch="sendyear"
    />

    <view class="timeChoose" v-show="!iatv">
      <view class="flex">
        <u-button
          size="mini"
          shape="circle"
          :class="[isShow ? 'selectd bd1' : 'selecttime bd1']"
          :disabled="jconce"
          @tap="morning"
          v-show="btnshow"
          >上午</u-button
        >
        <u-button
          size="mini"
          shape="circle"
          :class="[isShow1 ? 'selectd bd1' : 'selecttime bd1']"
          :disabled="jconce"
          @tap="afternoon"
          v-show="btnshow1"
          >下午</u-button
        >
      </view>
      <view class="time-list flex">
        <view
          :class="items.flag ? 'time-item abc' : 'time-item'"
          v-for="(items, indexs) in AM"
          v-show="isShow && items.subValue != 0"
          @tap="selecTime(items)"
        >
          <view class="in-item">
            <view>{{ items.soltTime }}</view>
            <view>(剩余{{ items.subValue }}个)</view>
          </view>
        </view>
        <view
          :class="items.flag ? 'time-item abc' : 'time-item'"
          v-for="(items, indexs) in PM"
          v-show="isShow1 && items.subValue != 0"
          @tap="selecTime1(items)"
        >
          <view class="in-item">
            <view>{{ items.soltTime }}</view>
            <view>(剩余{{ items.subValue }}个)</view>
          </view>
        </view>
      </view>
    </view>
    <view class="bd1" style="width: 100%; padding: 10% 5% 20% 5%; height: 60px">
      <u-button
        style="color: #fff; background-color: #18c7e1"
        @tap="appTime"
        v-show="!iatv"
      >
        预约</u-button
      >
      <u-button
        class="bd1"
        style="
          background-color: #18c7e1;
          color: #fff;
          background-color: #dddddd;
        "
        v-show="iatv"
        :disabled="iatv"
      >
        该社区暂未配置时间段或今天的号码已预约完毕</u-button
      >
    </view>
    <u-modal
      v-model="showConfirm"
      @confirm="confirm"
      title="预约须知"
      v-show="vtype != 2 && yyname != '老年人预约体检' && !usercomehere"
      :async-close="true"
      :show-cancel-button="true"
    >
      <view style="padding: 25upx" v-show="planType == 12">
        <view class="t1">预约门诊：{{ yyname }}</view>
        <view class="t1">预约时间：{{ subscribeTime }} {{ timeSolt }}</view>
        <view class="t1">预约须知：</view>
        <view
          class="t1"
          style="font-size: 26rpx; color: #434343; line-height: 48rpx"
        >
          ①预约门诊 <br />
          <!-- 	②本次预约仅预约到门诊接种，所接种疫苗已门诊医生登记为准 <br />
					③部分疫苗会有缺苗情况，预约前请以门诊确认 <br />
					④部分多人份疫苗社区会设定特定接种日，预约前请以门诊确认 -->
        </view>
      </view>
      <view style="padding: 25upx" v-show="planType != 4 && planType != 12">
        <view class="t1">预约门诊：{{ preInfo.yysq || sqname }}</view>
        <view class="t1">预约时间：{{ subscribeTime }} {{ timeSolt }}</view>
        <view class="t1">预约须知：</view>
        <view
          class="t1"
          style="font-size: 26rpx; color: #434343; line-height: 48rpx"
          >①请参考接种本或医生提醒预约下一针接种时间
          <br />
          ②本次预约仅预约到门诊接种，所接种疫苗已门诊医生登记为准 <br />
          ③部分疫苗会有缺苗情况，预约前请以门诊确认 <br />
          ④部分多人份疫苗社区会设定特定接种日，预约前请以门诊确认</view
        >
      </view>
      <view
        style="padding: 25upx"
        v-show="planType == 4 && yyname == '产检预约'"
      >
        <view class="t1">预约门诊：{{ yyname }}</view>
        <view class="t1">预约时间：{{ subscribeTime }} {{ timeSolt }}</view>
        <view class="t1">预约须知：</view>
        <view
          class="t1"
          style="font-size: 26rpx; color: #434343; line-height: 48rpx"
          >①本次为到门诊进行孕产建档，领取母子健康手册
          <br />
          ②到门诊进行孕产建档，请带上母亲身份证及准生证 <br />
          ③若无法按时到场，请及时取消，以免影响下次预约 <br
        /></view>
      </view>
      <view
        style="padding: 25upx"
        v-show="planType == 4 && yyname == '产后42天预约'"
      >
        <view class="t1">预约门诊：{{ yyname }}</view>
        <view class="t1">预约时间：{{ subscribeTime }} {{ timeSolt }}</view>
        <view class="t1">预约须知：</view>
        <view
          class="t1"
          style="font-size: 26rpx; color: #434343; line-height: 48rpx"
        >
          ①本次为产后42天到门诊进行产后恢复检查，具体内容以医生 <br />
          现场检查为准 ②若无法按时到场，请及时取消，以免影响下次预约 <br />
        </view>
      </view>
    </u-modal>
    <u-modal
      v-model="showConfirm"
      @confirm="confirm"
      title="预约须知（二类苗)"
      v-show="vtype == 2 || yyname == '老年人预约接种'"
      :async-close="true"
      :show-cancel-button="true"
    >
      <view style="padding: 25upx" v-show="planType != 4">
        <view class="t1">预约门诊：{{ preInfo.yysq || sqname }}</view>
        <view class="t1">预约时间：{{ subscribeTime }} {{ timeSolt }}</view>
        <view class="t1">预约须知：</view>
        <view
          class="t1"
          style="font-size: 26rpx; color: #434343; line-height: 48rpx"
          >①请参考接种本或医生提醒预约下一针接种时间
          <br />
          ②本次预约仅预约到门诊接种，所接种疫苗已门诊医生登记为准 <br />
          ③部分疫苗会有缺苗情况，预约前请以门诊确认 <br />
          ④二类疫苗门诊存量有限，预约后请按时前往门诊接种<br />
          ⑤若无法按时接种，请及时取消，以免影响下次预约<br />
        </view>
      </view>
    </u-modal>
    <u-modal
      v-model="showConfirm"
      @confirm="confirm"
      v-show="yyname == '预约儿保' || yyname == '儿童保健'"
      title="预约须知（儿保）"
      :async-close="true"
      :show-cancel-button="true"
    >
      <view style="padding: 25upx" v-show="planType != 4">
        <view class="t1">预约门诊：{{ preInfo.yysq || sqname }}</view>
        <view class="t1">预约时间：{{ subscribeTime }} {{ timeSolt }}</view>
        <view class="t1">预约须知：</view>
        <view
          class="t1"
          style="font-size: 26rpx; color: #434343; line-height: 48rpx"
        >
          ①请参考母子健康手册或医生提醒预约下一次儿保时间<br />
          ②到门诊进行儿童保健，请带上母子健康手册 <br />
          ③本预约仅预约到门诊儿保，具体儿保内容已现场医生进行为准 <br />
          ④若无法按时儿保，请及时取消，以免影响下次预约<br
        /></view>
      </view>
      <view style="padding: 25upx" v-show="planType == 4">
        <view class="t1">预约门诊：{{ yyname }}</view>
        <view class="t1">预约时间：{{ subscribeTime }} {{ timeSolt }}</view>
        <view class="t1">预约须知：</view>
        <view
          class="t1"
          style="font-size: 26rpx; color: #434343; line-height: 48rpx"
          >①本次为到门诊进行孕产建档，领取母子健康手册
          <br />
          ②到门诊进行孕产建档，请带上母亲身份证及准生证 <br />
          ③若无法按时到场，请及时取消，以免影响下次预约 <br
        /></view>
      </view>
    </u-modal>
    <u-modal
      v-model="showConfirm"
      @confirm="confirm"
      title="体检确认预约信息"
      v-show="yyname == '老年人预约体检' && planType == 7"
      :async-close="true"
      :show-cancel-button="true"
    >
      <view style="padding: 25upx" v-show="planType != 4">
        <view class="t1">预约门诊：{{ preInfo.yysq || sqname }}</view>
        <view class="t1">预约时间：{{ subscribeTime }} {{ timeSolt }}</view>
        <view class="t1">预约须知：(老年人体检)</view>
        <view
          class="t1"
          style="font-size: 26rpx; color: #434343; line-height: 48rpx"
          >①行动不便老人建议请其他家人陪同 <br />
          ②若无法按时到场，请及时取消，以免影响下次预约 <br
        /></view>
      </view>
    </u-modal>
    <u-modal
      v-model="showConfirm"
      @confirm="confirm"
      :title="yyname"
      v-show="usercomehere"
      :async-close="true"
      :show-cancel-button="true"
    >
      <view style="padding: 25upx" v-show="planType != 4">
        <view class="t1">预约门诊：{{ yyname }}</view>
        <view class="t1">预约时间：{{ subscribeTime }} {{ timeSolt }}</view>
        <view class="t1">预约须知</view>
        <view
          class="t1"
          style="font-size: 26rpx; color: #434343; line-height: 48rpx"
          >{{ yyname }}暂无通知 <br />
          <br />
        </view>
      </view>
    </u-modal>
    <!-- 首次弹窗 -->
    <u-modal v-model="firstShow" :content="firstContent"></u-modal>
  </view>
</template>

<script>
//
import Qs from "qs";
import pub from "../../../../utils/pub.js";
import uniCalendar from "@/components/uni-calendar/uni-calendar.vue";
import { mapMutations } from "vuex";
export default {
  components: {
    uniCalendar,
  },
  data() {
    return {
      firstShow: false, //首此弹窗
      firstContent: "", //弹窗信息
      isActive: true,
      iatv: false,
      jconce: false, //按钮的状态
      hasError: false,
      preInfo: {}, // 父级传过来的url参数
      subscribeTime: pub.getCurrentDate(), // 日期
      timeSolt: "", // 时间段
      isShow: false,
      isShow1: false,
      dateinfo: {},
      planType: "",
      AM: [],
      PM: [],
      havetimenohao: false, //有时间段没有号
      showConfirm: false,
      sqname: "", //社区名
      vtype: "", //疫苗type
      planId: "",
      datainfoday: [], //获取开关诊的日子
      vid: "", //疫苗id
      vPid: "",
      btnshow: true,
      btnshow1: true,
      year: "", //当前的年份
      month: "", //当前的月
      usercomehere: "", //判断用户是从哪里进来的，区别不同用户门诊预约
      endTime: "", //关诊日
      startTime: "", //开诊日
      deptId: "", //新增科室ID
    };
  },
  onLoad(options) {
    let data = JSON.parse(options.data || "{}");
    console.log(options);
    this.planType = options.type || data.type;
    this.yyname = options.name || data.yyxm;
    this.sqname = options.sq || data.yysq;
    this.vtype = options.vtype || data.vtype;
    this.vid = options.vid;
    this.vPid = options.vPid || data.vPid;
    this.usercomehere = options.comeuser;
    this.deptId = options.deptId || data.deptId;
    if (typeof options.planid === "undefined" || this.vtype == 1) {
      this.planId = -1;
    } else {
      this.planId = options.planid;
    }
    this.getdate();
    this.goOpenDay();
    this.config.getLoginInfo();
    this.jcIsClick();
  },
  onReady() {
    // this.getUiStyle();
  },
  onShow() {
    uni.onThemeChange(function (res) {
      var style = res.style;
      this.ptcolor(style);
    });
  },
  methods: {
    jcIsClick() {
      //检测是否可以进行预约
      this.config
        .get("/subscribeInfo/getSubscribeMessage", {
          deptId: this.deptId || -1,
          type: this.planType,
        })
        .then((res) => {
          if (res.data.data != undefined) {
            this.firstShow = true;
            this.firstContent = res.data.data.message;
          }
        });
    },
    ptcolor(style) {
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
        uni.setBackgroundTextStyle({
          textStyle: "dark",
        });
        uni.setBackgroundColor({
          backgroundColor: "#1B1C1E",
          backgroundColorTop: "#1B1C1E",
          backgroundColorBottom: "#1B1C1E",
        });
      } else {
        console.log("当前为普通模式");
        uni.setTabBarStyle({
          backgroundColor: "#fff",
        });
      }
    },
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      this.ptcolor(style);
    },
    //获取开关诊日
    goOpenDay() {
      this.config
        .get("/subscribeInfo/setCalendar", {
          yearParam: this.year,
          monthParam: this.month,
          type: this.preInfo.type || this.planType || "",
          deptId: this.deptId || "",
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            this.datainfoday = res.data.data.data;
            this.startTime = res.data.data.nowDatas.startTime;
            this.endTime = res.data.data.nowDatas.endTime;
          }
        });
    },
    sendyear(e) {
      this.year = e.year;
      this.month = e.month;
      this.goOpenDay();
      this.AM = [];
      this.PM = [];
      this.iatv = true;
    },
    change(e) {
      this.subscribeTime = e.fulldate;
      this.AM = [];
      this.PM = [];
      this.iatv = true;
      this.getdate();
    },
    getdate() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/subscribeInfo/getTimeSolt", {
          dateTime: this.subscribeTime,
          type: this.preInfo.type || this.planType || "",
          deptId: this.deptId || "",
        })
        .then((res) => {
          console.log(res);
          uni.hideLoading();
          this.isShow = !true;
          this.isShow1 = !false;
          if (res.data.code === 200) {
            this.iatv = false;
            if (typeof res.data.data === "undefined") {
              this.iatv = true;
            } else {
              this.dateinfo = res.data.data;
              if (typeof res.data.data.AM === "undefined") {
                this.btnshow = false;
                this.btnshow1 = true;
                this.jconce = true;
                this.isShow1 = true;
                let newPM = res.data.data.PM.filter((item) => {
                  return item.subValue != 0;
                });
                this.PM = newPM;
                if (newPM.length == 0) {
                  this.btnshow = false;
                  this.btnshow1 = false;
                  this.havetimenohao = true;
                  this.iatv = true;
                }
              } else if (typeof res.data.data.PM === "undefined") {
                this.btnshow1 = false;
                this.isShow = true;
                this.btnshow = true;
                this.jconce = true;
                let newAM = res.data.data.AM.filter((item) => {
                  return item.subValue != 0;
                });
                this.AM = newAM;
                if (newAM.length == 0) {
                  this.btnshow = false;
                  this.btnshow1 = false;
                  this.havetimenohao = true;
                  this.iatv = true;
                }
              } else {
                let newAM = res.data.data.AM;
                let newPM = res.data.data.PM;
                let nAm = newAM.filter((item) => {
                  return item.subValue != 0;
                });
                let nPm = newPM.filter((item) => {
                  return item.subValue != 0;
                });
                console.log(nAm);
                console.log(nPm);
                if (nAm.length == 0 && nPm.length == 0) {
                  this.btnshow = false;
                  this.btnshow1 = false;
                  this.havetimenohao = true;
                  this.iatv = true;
                }
                if (nAm.length == 0) {
                  this.PM = nPm;
                  this.btnshow = false;
                  this.jconce = true;
                  this.afternoon();
                  this.havetimenohao = false;
                } else if (nPm.length == 0) {
                  this.AM = nAm;
                  this.jconce = true;
                  this.btnshow1 = false;
                  this.morning();
                  this.havetimenohao = false;
                } else {
                  this.AM = nAm;
                  this.PM = nPm;
                  this.jconce = false;
                  this.btnshow = true;
                  this.btnshow1 = true;
                  this.morning(); //默认点击上午
                  this.havetimenohao = false;
                }
              }
            }
          } else {
            if (typeof res.data.data !== "undefined") {
              uni.showToast({
                title: res.data.msg,
                icon: "none",
              });
            }
            this.iatv = true;
          }
        });
    },
    valid() {
      return true;
    },
    // 弹框的确认
    old_confirm() {
      if (!this.valid()) return;
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/subscribesInfos/addSubscribesInfo", {
          deptId: this.preInfo.deptId,
          // planId: this.preInfo.planId,
          planType: this.preInfo.planType || this.planType,
          type: this.preInfo.type,
          subscribeTime: this.subscribeTime,
          timeSolt: this.timeSolt,
          planId: this.planId,
          vid: this.vid,
          vPid: this.vPid,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            uni.showToast({
              title: res.data.msg,
            });
            setTimeout((s) => {
              if (this.planType == 1 || this.planType == 2) {
                uni.navigateTo({
                  url: "/pages/main/child/backlog/backlog-tab",
                });
              } else if (this.planType == 4) {
                self.$store.state.yyname = this.yyname;
                uni.navigateTo({
                  url: "/pages/main/pregnant/backlog?name=" + this.yyname,
                });
              } else if (this.planType == 7 || this.planType == 8) {
                uni.navigateTo({
                  url: "/pages/main/old/daiban",
                });
              } else if (this.planType == 10) {
                uni.navigateTo({
                  url: "/pages/main/common/ptdaiban",
                });
              } else if (this.planType == 12 && this.usercomehere == "yf") {
                uni.navigateTo({
                  url: "/pages/main/pregnant/backlog",
                });
              } else if (this.planType == 12 && this.usercomehere == "child") {
                uni.navigateTo({
                  url: "/pages/main/child/backlog/backlog-tab",
                });
              } else if (this.planType == 12 && this.usercomehere == "old") {
                uni.navigateTo({
                  url: "/pages/main/old/daiban",
                });
              } else if (
                this.planType == 12 &&
                this.usercomehere == "ptpeople"
              ) {
                uni.navigateTo({
                  url: "/pages/main/common/ptdaiban",
                });
              } else {
                uni.navigateBack();
              }
            }, 500); // } else {
            this.showConfirm = false;
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
            setTimeout((s) => {
              this.getdate();
              this.goOpenDay();
            }, 300);
          }
        });
    },
    //目前使用的是这个
    confirm() {
      let self = this;
      //发起post方式的请求
      let data = {
        // planId: this.preInfo.planId,
        planType: this.preInfo.planType || this.planType,
        type: this.preInfo.type,
        subscribeTime: this.subscribeTime,
        timeSolt: this.timeSolt,
        planId: this.planId,
        vid: this.vid,
        vPid: this.vPid,
        userId: this.config.globalData.user.id,
        deptId: this.preInfo.deptId || this.config.globalData.user.deptId,
        deptIds: this.deptId || "", //科室id
      };
      const innerURL = this.config.finIp(); //预约内部地址
      uni.request({
        //http://39.98.118.19:8080 ios   android 8080
        url: innerURL + "/subscribesInfos/addSubscribesInfo", //仅为示例，并非真实接
        data: Qs.stringify(data),
        method: "POST",
        header: {
          // 'custom-header': 'hello' //自定义请求头信息
          "content-type": "application/x-www-form-urlencoded",
        },
        success: (res) => {
          if (res.data.code === 200) {
            uni.showToast({
              title: "预约成功",
            });
            setTimeout((s) => {
              console.log(this.yyname);

              if (this.planType == 1 || this.planType == 2) {
                uni.navigateTo({
                  url:
                    "/pages/main/child/backlog/backlog-tab?name=" +
                    this.yyname +
                    "&type=" +
                    this.planType,
                });
                return;
              }
              if (this.planType == 4) {
                self.$store.state.yyname = this.yyname; //42天产检
                uni.navigateTo({
                  url:
                    "/pages/main/pregnant/backlog?name=" +
                    this.yyname +
                    "&type=" +
                    this.planType,
                });
                return;
              }
              if (this.planType == 7 || this.planType == 8) {
                uni.navigateTo({
                  url:
                    "/pages/main/old/daiban?name=" +
                    this.yyname +
                    "&type=" +
                    this.planType,
                });
                return;
              }
              if (this.planType == 10) {
                uni.navigateTo({
                  url:
                    "/pages/main/common/ptdaiban?name=" +
                    this.yyname +
                    "&type=" +
                    this.planType,
                });
                return;
              }
              if (
                ((this.planType == 12 || this.planType == "") &&
                  this.usercomehere == "yf") ||
                this.usercomehere == "yf"
              ) {
                uni.navigateTo({
                  url:
                    "/pages/main/pregnant/backlog?name=" +
                    this.yyname +
                    "&type=" +
                    this.planType,
                });
                return;
              }
              if (
                ((this.planType == 12 || this.planType == "") &&
                  this.usercomehere == "child") ||
                this.usercomehere == "child"
              ) {
                uni.navigateTo({
                  url:
                    "/pages/main/child/backlog/backlog-tab?name=" +
                    this.yyname +
                    "&type=" +
                    this.planType,
                });
                return;
              }
              if (
                ((this.planType == 12 || this.planType == "") &&
                  this.usercomehere == "old") ||
                this.usercomehere == "old"
              ) {
                uni.navigateTo({
                  url:
                    "/pages/main/old/daiban?name=" +
                    this.yyname +
                    "&type=" +
                    this.planType,
                });
                return;
              }
              if (
                ((this.planType == 12 || this.planType == "") &&
                  this.usercomehere == "ptpeople") ||
                this.usercomehere == "ptpeople"
              ) {
                uni.navigateTo({
                  url:
                    "/pages/main/common/ptdaiban?name=" +
                    this.yyname +
                    "&type=" +
                    this.planType,
                });
              } else {
                uni.navigateBack();
              }
            }, 500);
          } else {
            this.showConfirm = false;
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
            setTimeout((s) => {
              this.getdate();
              this.goOpenDay();
            }, 300);
          }
        },
        // fail: (res) => {
        // _self.$api.msg('发送失败');
        // console.log(res)
        // }
      });
    },
    appTime() {
      //预约
      if (this.timeSolt != "") {
        this.config
          .get("/subscribesInfos/isSubscribe", {
            //deptId: this.preInfo.deptId||'',
            // planId: this.preInfo.planId,
            planType: this.preInfo.planType || this.planType || "",
            type: this.preInfo.type || this.planType || "",
            subscribeTime: this.subscribeTime,
            timeSolt: this.timeSolt,
            planId: this.planId,
            vid: this.vid || "",
            vPid: this.vPid || "",
            deptId: this.deptId || "", //科室id
          })
          .then((res) => {
            //console.log(res)
            let codenum = res.data.data;
            if (codenum == 1) {
              uni.showToast({
                title: "当前时间不可预约请重新选择",
                icon: "none",
              });
              return;
            } else if (codenum == 2) {
              uni.showToast({
                title: "当前时间段不可预约请重新选择时间段",
                icon: "none",
              });
              return;
            } else if (codenum == 3) {
              uni.showToast({
                title: "当前时间段已无可预约数，请刷新后重试",
                icon: "none",
              });
              return;
            } else {
              this.showConfirm = true;
            }
          });
      } else {
        uni.showToast({
          title: "请先选择时间段",
          icon: "none",
        });
      }
    },
    morning() {
      this.isShow = true;
      this.isShow1 = false;
      this.dateinfo.PM.forEach((t) => (t.flag = false));
    },
    afternoon() {
      this.isShow = !true;
      this.isShow1 = !false;
      this.dateinfo.AM.forEach((t) => (t.flag = false));
    },
    selecTime(v) {
      this.hasError = true;
      this.timeSolt = v.soltTime;
      if (v.flag) {
        return;
      }
      this.dateinfo.AM.forEach((t) => (t.flag = false));
      v.flag = true;
    },
    selecTime1(v) {
      this.hasError = true;
      this.timeSolt = v.soltTime;
      if (v.flag) {
        return;
      }
      this.dateinfo.PM.forEach((t) => (t.flag = false));
      v.flag = true;
    },
  },
};
</script>

<style lang="less" scoped>
uni-page-body,
#app,
page {
  background-color: #ffffff;
  height: 100%;
}
.timeChoose {
  margin-top: 50upx;
}

.time-list {
  padding: 30upx 0;
  justify-content: flex-start;
  flex-wrap: wrap;

  .time-item {
    width: 33.33%;
    padding: 20upx;

    .in-item {
      font-size: 26upx;
      padding: 20upx;
      border: 1upx solid #777;

      border-radius: 10upx;
    }
  }
}

.selecttime {
  width: 140rpx;
}

.selectd {
  width: 140rpx;
  color: #18c7e1 !important;
  background: #ffffff !important;
}

uni-view.time-item.abc {
  font-size: 26upx;
  color: #3395ff;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  uni-page-body,
  #app,
  page {
    background-color: #1b1c1e;
    height: 100%;
  }
  .bd {
    background-color: #1b1c1e;
    height: 100vh;
  }
  .bd1 {
    background-color: #1b1c1e !important;
  }
  .md10 {
    padding-bottom: 30px;
  }
  .bd2 {
    margin: 0;
    padding: 0;
    background-color: #1b1c1e;
  }
  .t1 {
    color: #ccc !important;
  }

  .time-list {
    color: #ccc !important;
    background-color: #1b1c1e;
  }
}
</style>
